<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="80px"
      style="width: 500px; margin: 2px"
    >
      <el-form-item label="部门类型" prop="departTypeId">
        <el-select
          v-model="form.departTypeId"
          placeholder="请选择部门类型"
          style="width: 419px"
        >
          <el-option label="公司" value="1"></el-option>
          <el-option label="部门" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级部门" prop="pId">
        <el-select
          v-model="form.pId"
          placeholder="请选择上级部门"
          style="width: 419px"
        >
          <el-option label="广州分公司" value="1"></el-option>
          <el-option label="东莞分公司" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="部门名称" prop="departName">
        <el-input v-model="form.departName"></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="person">
        <el-input v-model="form.person"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="部门状态" prop="status" style="width: 43%">
        <el-radio-group v-model="form.status">
          <el-radio :label="true">正常</el-radio>
          <el-radio :label="false">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="创建时间" prop="creationtime">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="form.creationtime"
            style="width: 419px"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="add">保存</el-button>
        <el-button @click="list">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { adddepartManage } from "@/api/sysManage/DepartManage";
export default {
  data() {
    return {
      form: {
        departTypeId: "",
        pId: "",
        departName: "",
        person: "",
        phone: "",
        status: 1,
        creationtime: "",
      },
      rules: {
        departTypeId: [
          { required: true, message: "请选择部门类型", trigger: "change" },
        ],
        pId: [{ required: true, message: "请选择上级部门", trigger: "change" }],
        departName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        person: [{ required: true, message: "请输入负责人", trigger: "blur" }],
        phone: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
        status: [
          { required: true, message: "请选择部门状态", trigger: "change" },
        ],
        creationtime: [
          { required: true, message: "请选择创建时间", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    //添加
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          adddepartManage(this.form).then((res) => {
            if (res.data) {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.push("/SysManage/DepartManage");
            } else {
              this.$message.error("添加失败");
              return;
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //跳转
    list() {
      this.$router.push("/SysManage/DepartManage");
    },
  },
  created() {},
};
</script>
<style>
</style>